<template>
  <section class="todoapp" id="app">
    <MvcHeader :title="'备忘录'" @add="add"></MvcHeader>
    <MvcList :todoList="tmpArr" @toggle="toggle" @del="del" @all="all"></MvcList>
    <MvcFooter @clear="clear" :total="total" @screening="screening"></MvcFooter>
  </section>
</template>

<script>
import MvcHeader from '@/components/MvcHeader.vue'
import MvcFooter from '@/components/MvcFooter.vue'
import MvcList from '@/components/MvcList.vue'
// import bus from '@/utils/bus.js'

export default {
  data() {
    return {
      todoList: [],
      tmpArr: [],
      total: 0,
      flag: true,
      i: 1
    }
  },
  components: {
    MvcHeader,
    MvcFooter,
    MvcList
  },
  created() {
    let d = localStorage.getItem('data')
    if (!d) {
      this.todoList = []
    } else {
      this.todoList = JSON.parse(localStorage.getItem('data'))
    }
    this.tmpArr = this.todoList
    if (this.todoList != null) {
      this.nowTotal(this.tmpArr)
    }
  },
  methods: {
    toggle(item) {
      this.todoList.some(el => {
        if (el.id == item.id) {
          el.isFinish = !el.isFinish
        }
      })
      // item.isFinish = !item.isFinish
      localStorage.setItem('data', JSON.stringify(this.tmpArr))
    },
    del(item) {
      item.isDel = true
      this.nowTotal(this.tmpArr)
      localStorage.setItem('data', JSON.stringify(this.tmpArr))
    },
    all() {
      if (this.flag) {
        this.tmpArr.forEach(el => (el.isFinish = true))
        this.flag = false
      } else {
        this.tmpArr.forEach(el => (el.isFinish = false))
        this.flag = true
      }
    },
    add(content) {
      let id = this.tmpArr.reduce((max, el) => (max > el.id ? max : el.id), 0)
      this.todoList.push({ id: ++id, content, isFinish: false, isDel: false })
      this.tmpArr = this.todoList
      if (this.i == 1) {
        this.screening(this.i)
        localStorage.setItem('data', JSON.stringify(this.tmpArr))
      }
      if (this.i == 2) {
        this.screening(this.i)
        localStorage.setItem('data', JSON.stringify(this.tmpArr))
      }
      if (this.i == 3) {
        this.screening(this.i)
        localStorage.setItem('data', JSON.stringify(this.tmpArr))
      }
      this.nowTotal(this.tmpArr)
    },
    clear() {
      this.tmpArr.filter(el => el.isFinish === true).forEach(el => (el.isDel = true))
      this.screening(this.i)
      this.nowTotal(this.tmpArr)
      localStorage.setItem('data', JSON.stringify(this.tmpArr))
    },
    screening(i) {
      this.i = i
      if (this.i == 1) {
        this.tmpArr = this.todoList.filter(el => el)
        localStorage.setItem('data', JSON.stringify(this.tmpArr))
        this.nowTotal(this.tmpArr)
        return
      }
      if (this.i == 2) {
        this.tmpArr = this.todoList.filter(el => el.isFinish == false)
        localStorage.setItem('data', JSON.stringify(this.tmpArr))
        this.nowTotal(this.tmpArr)
        return
      }
      if (this.i == 3) {
        this.tmpArr = this.todoList.filter(el => el.isDel == false).filter(el => el.isFinish == true)
        localStorage.setItem('data', JSON.stringify(this.tmpArr))
        this.nowTotal(this.tmpArr)
        return
      }
    },
    nowList(arr) {
      if (arr) {
        return arr.filter(el => el.isDel == false)
      }
    },
    nowTotal(arr) {
      return (this.total = this.nowList(arr).length)
    }
  }
}
</script>

<style lang='less' scoped>
</style>